<template>
    <div class="app">
        <header>
            <div class="title" @click="$router.push('/')">洞头项目全生命数据展示平台</div>
            <div class="btn_box">
                <div class="home" v-if="$route.path==='/project_detail'" @click="$router.back()">
                    <!--                    <span class="icon"><i class="icon-huaban"></i></span>-->
                    <span>◀◁ 返回</span>
                </div>
            </div>
        </header>
        <div class="contianer">
            <router-view/>
        </div>
    </div>
</template>

<style lang="less">
    @import "./assets/font/iconfont.css";
    body {
        margin: 0;
        padding: 0;
    }
    .app{
        height: 100vh;
        background: url("@/assets/images/bg.jpg") no-repeat center;
        background-size: cover;
        color: #fff;
        >header{
            height: 1.2833rem;
            text-align: center;
            background: url("@/assets/images/头部.png")no-repeat center/100% 100%;
            position: relative;
            >.title{
                display: inline-block;
                font-size: 0.375rem;
                line-height: 1.0833rem;
                font-weight: bold;
                cursor: pointer;
            }
            >.btn_box{
                position: absolute;
                bottom: 10px;
                left: 20px;
                display: flex;
                >.home{
                    margin-left: 30px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    transition: all .3s;
                    &:hover{
                        color: #00f2ff;
                        transform: translateY(-1px);
                    }
                    >.icon{
                        width: 26px;
                        height: 26px;
                        line-height: 26px;
                        text-align: center;
                        border-radius: 50%;
                        background-color: #00f2ff;
                        color: #333333;
                        margin-right: 10px;
                    }
                }
            }
        }
        >.contianer{
            height: calc(100% - 1.2833rem);
        }
    }
</style>
